<template>
  <div class="carouselEcharts">
    <!-- <el-carousel
      :interval="5000"
      arrow="always"
      :autoplay="false"
      indicator-position="none"
      ref="carousel"
    > -->
    <!-- <el-carousel-item v-for="item in 2" :key="item"> -->
    <!-- <div class="customizeCarouselBtn" @click="handelPrev">
          <img :src="require('@/assets/images/carouselLeft.png')" />
        </div>
        <div class="customizeCarouselBtn rightBtn" @click="handelNext">
          <img :src="require('@/assets/images/carouselRight.png')" />
        </div> -->
    <echartsBar
      :taskCount="taskCount"
      :finshCount="finshCount"
      :studyCount="studyCount"
      :echartsName="'echartsBar-1'"
      :start="0"
      :end="40"
      @handelFullScreen="handelFullScreen"
      :width="width"
      :height="height"
    />
    <!-- <div class="fullScreenAndnarrow">
      <div class="btnBox" @click="handelFullScreen">
        <img :src="require('@/assets/images/fullIcon.png')" />
      </div>
    </div> -->
    <!-- </el-carousel-item> -->
    <!-- </el-carousel> -->
    <el-dialog :visible.sync="dialogVisible" :fullscreen="true">
      <div class="fullScreenEcharts">
        <!-- <el-carousel
          :interval="5000"
          arrow="always"
          :autoplay="false"
          indicator-position="none"
          ref="carousel-dialog"
        >
          <el-carousel-item v-for="item in 1" :key="item"> -->
        <!-- <div class="customizeCarouselBtn" @click="handelDialogPrev">
              <img :src="require('@/assets/images/carouselLeft.png')" />
            </div>
            <div
              class="customizeCarouselBtn rightBtn"
              @click="handelDialogNext"
            >
              <img :src="require('@/assets/images/carouselRight.png')" />
            </div> -->
        <echartsBar
          :taskCount="dtaskCount"
          :finshCount="dfinshCount"
          :studyCount="studyCount"
          :echartsName="'echartsBar-dialog-1'"
          :exitFullScreen="dialogVisible"
          @exitFullScreen="exitFullScreen"
          :start="0"
          :end="40"
          :width="width"
          :height="height"
        />
        <!-- </el-carousel-item> -->
        <!-- </el-carousel> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echartsBar from "@/components/echarts/echartsBar";
export default {
  name: "carouselEchartsBar",
  components: {
    echartsBar,
  },
  data() {
    return {
      dialogVisible: false,
      dtaskCount: [], // 弹出框内的图表数据
      dfinshCount: {}, // 弹出框内的图表数据
    };
  },
  props: {
    taskCount: Array, // 任务统计
    finshCount: Object, // 任务统计数据
    studyCount: Number, // 学习人数
    width: String,
    height: String,
  },
  watch: {
    taskCount(n, o) {
      this.dtaskCount = n;
    },
    finshCount(n, o) {
      this.dfinshCount = n;
    },
  },
  methods: {
    handelPrev() {
      this.$refs.carousel.prev();
    },
    handelNext() {
      this.$refs.carousel.next();
    },
    // 全屏轮播
    handelDialogPrev() {
      this.$refs["carousel-dialog"].prev();
    },
    // 全屏轮播
    handelDialogNext() {
      this.$refs["carousel-dialog"].next();
    },
    // 点击全屏
    handelFullScreen() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.dtaskCount = JSON.parse(JSON.stringify(this.taskCount));
        this.dfinshCount = JSON.parse(JSON.stringify(this.finshCount));
      });
    },
    // 退出全屏
    exitFullScreen() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="stylus">
.carouselEcharts {
  margin-top: 30px;
  box-shadow: 0px 8px 16px 0px rgba(7, 23, 39, 0.1);
  border-radius: 18px;

  .echartsBar {
    padding-bottom: 60px;
  }

  // .el-carousel {
  // overflow-x: unset;

  // .el-carousel__container {
  // height: 550px;

  // .el-carousel__arrow {
  // display: none;
  // }

  // .el-carousel__item {
  // opacity: 0;
  // background-color: #ffffff;
  // box-shadow: 0px 8px 16px 0px rgba(7, 23, 39, 0.1);
  // border-radius: 18px;

  // .customizeCarouselBtn {
  // z-index: 10;
  // outline: 0;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // padding: 0;
  // margin: 0;
  // position: absolute;
  // top: 50%;
  // width: 43px;
  // height: 69px;
  // cursor: pointer;
  // transition: 0.3s;
  // color: #FFF;
  // transform: translateY(-50%);
  // text-align: center;
  // font-size: 12px;
  // background-color: rgba(204, 204, 204, 0.45);
  // border-radius: 5px;
  // border: none;

  // img {
  // width: 17px;
  // height: 34px;
  // }
  // }

  // .customizeCarouselBtn:hover {
  // background-color: #83acd3;
  // }

  // .rightBtn {
  // right: 0;
  // }
  // }

  // .is-active {
  // opacity: 1;
  // }
  // }
  // }
  .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__header {
        padding: 0;
      }

      .el-dialog__body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        height: 100%;

        .fullScreenEcharts {
          width: 100vw;
          height: 550px;
        }
      }
    }
  }
}
</style>